<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="css/unis.css">
    <link rel="stylesheet" href="../styles/displayFrame.css">
    <link rel="stylesheet" href="../styles/global.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/import-htmt.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
</head>
<body>
<div class="d-flex " style="margin-bottom: 55px ; margin-top: 35px;">
        <div class="col-8 po-r" style="font-weight: bold; padding-left:144px ; line-height: 80px;
font-size: 83.5821px;">
            <div style="font-size: 120px">Aa</div>
            <div style="font-weight: bold;
font-size: 54.5821px; ">Lato</div>
        </div>
</div>
<table class="unis-info-table">

    <thead>

    <tr>

        <th scope="col" class="table-headers">Label</th>

        <th scope="col" class="table-headers">Type Case</th>

        <th scope="col" class="table-headers">Size | Style | Spacing</th>

        <th scope="col" class="table-headers">Cases</th>

    </tr>

    </thead>

    <tbody id="typography-body">

    <tr>

        <td>h1</td>

        <td>

            <h1>Heading 1</h1>

        </td>

        <td>32px | Bold | 0.4px</td>

        <td>Large page titles</td>

    </tr>

    <tr>

        <td>h2

        </th>

        <td>

            <h2>Heading 2</h2>

        </td>

        <td>24px | Bold | 0.3px</td>

        <td>Screen titles</td>

    </tr>

    <tr>

        <td>h3</td>

        <td>

            <h3>Heading 3</h3>

        </td>

        <td>18px | Bold | 0.4px</td>

        <td>Section titles, Primary buttons</td>

    </tr>

    <tr>

        <td>h4</td>

        <td>

            <h4>Heading 4</h4>

        </td>

        <td>16px | Bold | 0.4px</td>

        <td>Subheader title text</td>

    </tr>

    <tr>

        <td>.bod-t1</td>

        <td><span class="bod-t1">Body 1</span></td>

        <td>16px | Regular | 0.4px</td>

        <td>Paragraph text</td>

    </tr>

    <tr>

        <td>.bod-t2</td>

        <td><span class="bod-t2">Body 2</span></td>

        <td>14px | Regular | 0.4px</td>

        <td>Paragraph text</td>

    </tr>

    <tr>

        <td>.but-t1</td>

        <td><span class="but-t1">Button 1</span></td>

        <td>14px | Bold | 0.4px</td>

        <td>Button</td>

    </tr>

    <tr>

        <td>.sub-t1</td>

        <td><span class="sub-t1">Subtitle 1</span></td>

        <td>13px | Bold | 0.3px</td>

        <td>Small text, Focused caption</td>

    </tr>

    <tr>

        <td>.sub-t2</td>

        <td><span class="sub-t2">Subtitle 2</span></td>

        <td>12px | Regular | 0.3px</td>

        <td>Small text, Secondary buttons</td>

    </tr>

    <tr>

        <td>.sm-t</td>

        <td><span class="sm-t">Small Text</span></td>

        <td>10px | Regular | 0.3px</td>

        <td>Subtext</td>

    </tr>

    </tbody>

</table>
</body>


</html>